<template>
    <div>
        home组件---{{title}}----{{count}}
        <br>
        <button @click="setTitle">改变title</button>
        <br>
        <br>
        <br>
        <button @click="this.$router.push({path:'news'})">js跳转到新闻</button>
        <br>
        <br>
        <button @click="this.$router.push({path:'/newsContent',query:{aid:'123'}})">跳转到新闻详情 get传值</button>
          <br>
        <br>
        <button @click="this.$router.push({path:'/newsContent/123'})">跳转到新闻详情 动态路由传值</button>
        <br>
        <br>
        <button @click="incCount">执行vuex里面的方法--改变数量</button>
        <br>
        <br>
        <ul>
            <li v-for="(item,index) in $store.state.list" :key="index">{{item}}</li>
        </ul>
        <br>
        <br>
        获取getters里面的数据--{{reverseMsg}}
        <br>
        <br>
        获取getters里面的数据--{{num}}
        <br>
        <hr>
        <br>
        countC:{{count}}
        <br>
        <button @click="incCountC">执行mutations方法</button>
        <br>
        <br>
        numC:{{numC}}
        <br>
        <br>
        <button @click="incActionCount">执行actions方法</button>
        <br>
        <br>
        <button @click="setActionCount(123)">执行actions方法  传值</button>

    </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex'
let title = '我是一个home组件'
export default defineComponent({
    setup(){
        const store = useStore()
        let incCountC = ()=>{
            store.commit('incCount')
        }
        let incActionCount = () => {
            store.dispatch('incCount')
        }
        let setActionCount = (num:number) => {
            store.dispatch('setCount',num)
        }
        return{
            countC:computed(()=>{
                return store.state.count
            }),
            numC:computed(()=>{
                return store.getters.num
            }),
            incCountC,
            incActionCount,
            setActionCount
        }
    },
    data(){
        return {
            title:title,
            userinfo:{
                username:'zhangsan',
            },
            age:20,
            sex:'男'
        }
    },
    computed:{
        count():number{
            return this.$store.state.count 
        },
        reverseMsg(){
            return this.$store.getters.reverseMsg
        },
        num():number{
            return this.$store.getters.num
        }
    },
    methods:{
        setTitle(){
            this.title = 'this is title'
        },
        incCount():void{
            // 触发了mutations
            this.$store.commit('incCount')
        }
    }
})
</script>
<style lang="scss">
// npm install -d sass-loader node-sass

</style>
